<template>
	<view class="leader-edit-container">

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 姓名 -->
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" v-model="guide.guideName" placeholder="请输入导游姓名" />
			</view>

			<!-- 电话 -->
			<view class="form-item">
				<text class="label">电话</text>
				<input class="input" v-model="guide.phone" type="number" placeholder="请输入联系电话" />
			</view>

			<!-- 状态 -->
			<view class="form-item">
				<text class="label">状态</text>
				<view class="status-selector">
					<view class="status-option" :class="{ active: guide.status === 0 }" @click="guide.status = 0">
						<view class="status-radio"></view>
						<text>在岗</text>
					</view>
					<view class="status-option" :class="{ active: guide.status === 1 }" @click="guide.status = 1">
						<view class="status-radio"></view>
						<text>休假</text>
					</view>
					<view class="status-option" :class="{ active: guide.status === 2 }" @click="guide.status = 2">
						<view class="status-radio"></view>
						<text>停用</text>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="form-item">
				<text class="label">备注</text>
				<textarea class="textarea" v-model="guide.remark" placeholder="请输入备注信息" />
			</view>
			<!-- 为底部按钮留出空间 -->
			<view style="height: 150rpx;"></view>
		</view>

		<!-- 底部固定保存按钮 -->
		<view class="save-bottom-btn" @click="saveGuide">
			<view>{{ isEditMode ? '更新' : '保存' }}</view>
		</view>
	</view>
</template>

<script>
import { createGuide, updateGuide, getGuideById } from '../../https/guide.js'

export default {
  data() {
    return {
      guideId: 0,
      guide: {
        guideId: 0,
        guideName: '',
        phone: null,
        status: 0,
        remark: ''
      }
    }
  },
  computed: {
    isEditMode() {
      return this.guideId !== 0 && !isNaN(this.guideId) && this.guideId > 0
    }
  },
  onLoad(options) {
    // 安全地获取id参数，并转换为数字类型
    this.guideId = options?.id && options.id !== '' ? parseInt(options.id) : 0
  },
  onShow() {
    // 每次显示页面时重置表单状态（仅在非编辑模式下）
    if (!this.isEditMode) {
      this.guide = {
        guideId: 0,
        openId: '',
        companyId: 0,
        guideName: '',
        phone: null,
        status: 0,
        remark: ''
      }
    }
    // 页面显示时加载数据（编辑模式）
    this.loadGuideData()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 保存导游信息
    saveGuide: async function() {
      // 表单验证
      if (!this.guide.guideName) {
        uni.showToast({
          title: '请输入导游姓名',
          icon: 'none'
        })
        return
      }

      // 构建请求参数，确保API参数格式正确
      const requestData = {
        ...this.guide,
        guideId: this.guide.guideId,
        guideName: this.guide.guideName,
        phone: this.guide.phone || null,
        status: this.guide.status,
        remark: this.guide.remark || '',
        openId: uni.getStorageSync('openId') || '', // 从本地获取OpenId
        companyId: 1 // 实际应用中应该从登录信息或配置中获取
      }

      try {
        // 显示加载提示
        uni.showLoading({
          title: this.isEditMode ? '更新中...' : '保存中...'
        })

        // 调用API
        if (this.isEditMode) {
          // 编辑现有导游
          requestData.guideId = this.guideId
          await updateGuide(requestData)
        } else {
          // 添加新导游
          await createGuide(requestData)
        }

        uni.showToast({
          title: this.isEditMode ? '更新成功' : '添加成功',
          icon: 'success',
          complete: () => {
            // 延迟返回，让用户看到成功提示
            setTimeout(() => {
              this.goBack()
            }, 1500)
          }
        })
      } catch (error) {
        uni.showToast({
          title: this.isEditMode ? '更新失败' : '添加失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 加载导游数据（编辑模式时）
    loadGuideData: async function() {
      if (!this.isEditMode) {
        return
      }

      try {
        uni.showLoading({
          title: '加载中...'
        })
        // 调用API获取导游详情
        const guideData = await getGuideById(this.guideId)
        // 检查返回数据结构
        const hasData = guideData && (guideData.guideId !== undefined || guideData.id !== undefined)
        if (hasData) {
          // 适配不同的数据结构，确保所有字段都是小写开头
          const dataToUse = {
            guideId: guideData.guideId || guideData.id,
            guideName: guideData.guideName,
            phone: guideData.phone,
            status: guideData.status,
            remark: guideData.remark || ''
          }
          this.guide = dataToUse
        } else {
          uni.showToast({
            title: '未找到导游信息',
            icon: 'none'
          })
          this.goBack()
        }
      } catch (error) {
        console.error('加载导游数据失败', error)
        uni.showToast({
          title: '加载失败: ' + (error.message || ''),
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style scoped>
	.leader-edit-container {
		padding: 0;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 表单区域 */
	.form-container {
		padding: 30rpx;
		padding-top: 120rpx;
		/* 为顶部导航栏留出空间 */
	}

	/* 保存按钮 - 放在页面底部固定位置 */
	.save-bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.save-bottom-btn>view {
		background-color: #007aff;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.form-item {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 10rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.label {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.input,
	.textarea {
		width: 100%;
		font-size: 32rpx;
		color: #333;
		padding: 0;
		border: none;
		background: none;
	}

	.textarea {
		min-height: 120rpx;
		max-height: 300rpx;
		resize: none;
		font-size: 30rpx;
		line-height: 1.5;
	}

	/* 状态选择器样式 */
	.status-selector {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.status-option {
		display: flex;
		align-items: center;
		margin-right: 60rpx;
		margin-bottom: 20rpx;
	}

	.status-radio {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		margin-right: 10rpx;
		position: relative;
	}

	.status-option.active .status-radio {
		border-color: #007aff;
	}

	.status-option.active .status-radio::after {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background-color: #007aff;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 修复输入框聚焦时的样式 */
	.input:focus,
	.textarea:focus {
		outline: none;
	}
</style>